<template>
  <el-dialog v-model="showDialog"
             :append-to-body="true"
             :close-on-click-modal="false"
             top="10vh"
             width="900px"
             class="no-padding-dialog log-comp-detail"
             @close="hideView">
    <el-tabs v-model="activeType" @tab-click="refreshList">
      <el-tab-pane label="已完成日志的员工" name="complete"/>
      <el-tab-pane label="未完成日志的员工" name="uncomplete"/>
    </el-tabs>

    <el-input v-model="search" placeholder="请输入姓名" class="search-input"
              @keyup.enter="refreshList">
      <template v-slot:append>
        <el-button icon="el-icon-search" @click="refreshList"/>
      </template>
    </el-input>

    <div class="list-body">
      <el-table v-loading="loading"
                :data="list"
                :cell-class-name="cellClassName"
                :height="tableHeight"
                stripe
                border
                highlight-current-row
                style="width: 100%"
                @row-click="handleRowClick">
        <template v-for="(item, index) in fieldList" :key="index">
          <el-table-column
              :prop="item.prop"
              :label="item.label"
              show-overflow-tooltip/>
        </template>

      </el-table>
      <div class="p-container">
        <el-pagination
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size.sync="pageSize"
            :total="total"
            class="p-bar"
            background
            layout="prev, pager, next, sizes, total, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
      </div>
    </div>

    <!-- CRM详情 -->
    <CRMFullScreenDetail v-model:visible="logDetailShow" :id="logDetailId" crm-type="log"/>
  </el-dialog>
</template>

<script setup>
import {
  oaLogCompleteListAPI,
  oaLogUnCompleteListAPI
} from '/src/api/oa/journal.js'
import CRMFullScreenDetail from "components/CRMFullScreenDetail.vue";

defineOptions({
  // 日志完成详情
  name: 'LogComDetail',
})

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  type: [Number, String]
})

const emits = defineEmits(['update:show'])
const optionData = reactive({
  showDialog: false,
  loading: false, // 加载动画
  activeType: 'complete',
  fieldList: [{
    label: '姓名',
    prop: 'realname'
  }, {
    label: '日志内容',
    prop: 'content'
  }, {
    label: '创建时间',
    prop: 'createTime'
  }],
  tableHeight: getTableHeight(), // 表的高度
  list: [],
  currentPage: 1,
  pageSize: 15,
  pageSizes: [15, 30, 60],
  total: 0,
  search: '',

  logDetailId: '',
  logDetailShow: false
})

const {
  showDialog,
  loading,
  activeType,
  fieldList,
  tableHeight,
  list,
  currentPage,
  pageSize,
  pageSizes,
  total,
  search,
  logDetailId,
  logDetailShow
} = toRefs(optionData)


watch(() => props.show, (value) => {
  optionData.showDialog = value
  if (value) {
    initInfo()
  }
})

function created() {
  window.onresize = () => {
    optionData.tableHeight = getTableHeight()
  }
}

created()


/**
 * 获取表高
 */
function getTableHeight() {
  const clientHeight = document.documentElement.clientHeight
  const paddingHeight = clientHeight * 0.2

  return clientHeight - paddingHeight - 200
}

/**
 * 初始化数据
 */
function initInfo() {
  optionData.search = ''
  optionData.list = []
  refreshList()
}

function refreshList() {
  optionData.currentPage = 1
  getList()
}

/**
 * 通过回调控制class
 */
function cellClassName({row, column, rowIndex, columnIndex}) {
  if (column.property === 'content') {
    return 'can-visit--underline'
  } else {
    return ''
  }
}

/**
 * 隐藏视图
 */
function hideView() {
  emits('update:show', false)
}

/**
 * 更改每页展示数量
 */
function handleSizeChange(val) {
  optionData.pageSize = val
  getList()
}

/**
 * 更改当前页数
 */
function handleCurrentChange(val) {
  optionData.currentPage = val
  getList()
}

/**
 * 获取列表数据
 */
function getList() {
  optionData.loading = true
  let params = {
    page: optionData.currentPage,
    limit: optionData.pageSize,
    completeType: optionData.type,
    search: optionData.search
  }
  const request = optionData.activeType == 'complete' ? oaLogCompleteListAPI : oaLogUnCompleteListAPI
  request(params).then(res => {
    optionData.list = res.data.data.list
    optionData.total = res.data.data.totalRow
    optionData.loading = false
  }).catch(() => {
    optionData.loading = false
  })
}

/**
 * 查看详情
 */
function handleRowClick(row, column, event) {
  if (optionData.activeType == 'complete' && column.property === 'content') {
    optionData.logDetailId = row.logId
    optionData.logDetailShow = true
  }
}
</script>


<style lang="scss">
.log-comp-detail {
  .el-dialog__headerbtn {
    z-index: 3;
  }

  .el-tabs {
    margin-bottom: 10px;

    .el-tabs__nav-wrap::after {
      display: none;
    }

    .el-tabs__item.is-top:nth-child(2) {
      padding-right: 0;
    }
  }

  .search-input {
    width: 300px;
    margin: -18px 0 0 -150px;
    position: absolute;
    left: 50%;
    top: 20px;
  }

  .el-dialog__body {
    position: relative;
  }
}
</style>
